<template>
	<view class="logistics-page">

		<!-- 物流信息内容 -->
		<view class="logistics-content">
			<!-- 物流地图 -->
			<view class="map-section" v-if="logisticsInfo.RouteMapUrl">
				<view class="map-title">物流地图</view>
				<view class="map-container">
					<web-view :src="logisticsInfo.RouteMapUrl" style="width: 100px; height: 200px;"></web-view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<view class="info-item">
					<text class="label">物流公司：</text>
					<text class="value" v-if="orderInfo.backStatus!=='4'">{{ orderInfo.addressVo.deliveryName || '暂无' }}</text>
					<text class="value" v-if="orderInfo.backStatus==='4'">{{ orderInfo.addressVo.refundDeliveryCode || '暂无' }}</text>
				</view>
				<view class="info-item">
					<text class="label">物流单号：</text>
					<text class="value" v-if="orderInfo.backStatus!=='4'">{{ orderInfo.addressVo.deliveryNo|| '暂无' }}</text>
					<text class="value" v-if="orderInfo.backStatus==='4'">{{ orderInfo.addressVo.refundDeliveryNo|| '暂无' }}</text>
					<button class="copy-btn" @click="copyText(logisticsInfo.LogisticCode)"
						v-if="logisticsInfo.LogisticCode">复制</button>
				</view>
				<view class="info-item">
					<text class="label">订单号：</text>
					<text class="value">{{ orderInfo.id || '暂无' }}</text>
					<button class="copy-btn" @click="copyText(orderInfo.id)" v-if="orderInfo.id">复制</button>
				</view>
			</view>

			<!-- 物流轨迹 -->
			<view class="logistics-timeline">
				<view class="timeline-title">物流轨迹</view>
				<view class="timeline-list">
					<view v-for="(item, index) in logisticsInfo.Traces" :key="index"
						:class="['timeline-item', index === 0 ? 'active' : '']">
						<view class="timeline-dot"></view>
						<view class="timeline-content">
							<view class="timeline-desc">{{ item.AcceptStation }}</view>
							<view class="timeline-time">{{ item.AcceptTime }}</view>
						</view>
					</view>
					<view v-if="!logisticsInfo.Traces || logisticsInfo.Traces.length === 0" class="no-data">
						暂无物流信息
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLogisticsInfo,
		getOrder
	} from '@/api/order.js'
	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {},
				logisticsInfo: {
					company: '',
					trackingNo: '',
					traces: [],
					mapUrl: ''
				},
			}
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId;
				this.loadLogisticsInfo();
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},

			async loadLogisticsInfo() {
				try {
					// TODO: 调用物流信息接口
					getLogisticsInfo({
						// id: 'DD-20250820-000043'
						id: this.orderId
					}).then(res => {
						console.log(res)
						this.logisticsInfo = res.data
						this.logisticsInfo.Traces.reverse()
						if (this.logisticsInfo.RouteMapUrl) {
							// 去掉URL中的result部分，重新赋值地址
							this.logisticsInfo.RouteMapUrl = this.logisticsInfo.RouteMapUrl.replace('/result', '')
						}
					})

					//查询订单详情
					if(this.orderId.includes('T')){
						this.orderId = this.orderId.replace('T', '')
					}
					getOrder(this.orderId).then(res => {
						this.orderInfo = res.data
					})

					// // 模拟数据
					// this.logisticsInfo = {
					// 	company: '顺丰速运',
					// 	trackingNo: 'SF1234567890',
					// 	traces: [{
					// 			desc: '快件已签收，签收人：门卫',
					// 			time: '2024-01-15 14:30:00'
					// 		},
					// 		{
					// 			desc: '快件正在派送中，派送员：张三 电话：138****1234',
					// 			time: '2024-01-15 09:15:00'
					// 		},
					// 		{
					// 			desc: '快件已到达【北京朝阳区营业点】',
					// 			time: '2024-01-15 08:30:00'
					// 		},
					// 		{
					// 			desc: '快件运输中，已到达【北京转运中心】',
					// 			time: '2024-01-14 22:15:00'
					// 		},
					// 		{
					// 			desc: '快件已发出，发件人：瑞隆安',
					// 			time: '2024-01-14 18:00:00'
					// 		}
					// 	]
					// };
				} catch (error) {
					console.error('获取物流信息失败:', error);
					uni.showToast({
						title: '获取物流信息失败',
						icon: 'none'
					});
				}
			},

			copyText(text) {
				if (!text) {
					uni.showToast({
						title: '暂无内容可复制',
						icon: 'none'
					});
					return;
				}

				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.logistics-page {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.header-left {
		width: 60rpx;
	}

	.back-icon {
		font-size: 40rpx;
		color: #333;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.header-right {
		width: 60rpx;
	}

	.logistics-content {
		padding: 20rpx;
	}

	.map-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.map-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.map-container {
		width: 100%;
		height: 300rpx;
		border-radius: 8rpx;
		overflow: hidden;
		border: 1rpx solid #f0f0f0;
	}

	.map-webview {
		width: 100%;
		height: 300rpx;
	}

	.order-info {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.info-item:last-child {
		margin-bottom: 0;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		width: 140rpx;
	}

	.value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		margin-right: 20rpx;
	}

	.copy-btn {
		background-color: transparent;
		color: #666;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ddd;
		line-height: 1.2;
		min-width: 80rpx;
	}

	.copy-btn:active {
		background-color: #f5f5f5;
	}

	.logistics-timeline {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.timeline-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.timeline-list {
		position: relative;
	}

	.timeline-list::before {
		content: '';
		position: absolute;
		left: 15rpx;
		top: 0;
		bottom: 0;
		width: 2rpx;
		background-color: #e0e0e0;
	}

	.timeline-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40rpx;
		position: relative;
	}

	.timeline-item:last-child {
		margin-bottom: 0;
	}

	.timeline-dot {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #e0e0e0;
		margin-right: 30rpx;
		position: relative;
		z-index: 1;
	}

	.timeline-item.active .timeline-dot {
		background-color: #07c160;
	}

	.timeline-content {
		flex: 1;
		padding-top: 5rpx;
	}

	.timeline-desc {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		line-height: 1.4;
	}

	.timeline-time {
		font-size: 24rpx;
		color: #999;
	}

	.no-data {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 60rpx 0;
	}
</style>